import React, { createRef, useState } from 'react'

// import daka from '@a/images/daka/images/daka_1.png'
// import xx from '@a/images/daka/images/x_03.png'
import tu from '@a/images/daka/images/x_16.png'
import yuyin from '@a/images/daka/images/x_07.png'
import file from '@a/images/daka/images/x_10.png'
import wen from '@a/images/daka/images/x_13.png'
import { post } from '../../../utils/http'



import { StyWrap } from './StyWrap'
// import ImagePickerExample from './CreateImg'
import { useLocation } from 'react-router-dom'
// import { nonsense } from 'antd-mobile/lib/picker'
// import { useSelector } from 'react-redux'
const NewUi = (props) => {
  let location = useLocation()
  let ipt = createRef()
  
  const [obj, setObject] = useState({
    ...location.state.info
  });
  console.log(obj);
  let handleSubmit = async (e) => {
     console.log(e.target);
    e.preventDefault();
    const formData = new FormData(e.target)
    formData.dkName = e.target.dkName.value
    formData.photo = e.target.photo.value
    formData.dkBody = e.target.dkBody.value
    
    // formData.
    console.log(formData);
    let result = await post({
      url:'/api/daka/add?uId=1'
    },
    {
      data:formData
    })
    console.log(result);
    //  return false
    // e.preventDefault();  // 这样就好了
    // this.props.form.validateFields((err, values) => {
    //   if (!err) {
    //     console.log('Received values of form: ', values);
    //   }
    // })
  }
  let handleChange = (e) => {
    //点击后通过ref获取到dom节点信息，拿到files[0],就是本地图片的文件名
    var url = null
    var file = ipt.current.files[0]
    console.log(ipt.current.files[0])
    //通过文件名来查找路径，这里用到了window.createOBJjectURL()
    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
    if (window.createObjectURL !== undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL !== undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL !== undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    setObject({ ...obj, dkPhoto: url })
    console.log(obj.dkPhoto)
  }
  return (
    <StyWrap>
    <form onSubmit={handleSubmit} action="http://8iswhp.natappfree.cc/daka/add?uId=1" method="POST" encType="multipart/form-data">
      <div>
        <div className='title'>
          <h1>{obj.clazz}</h1>
          <input style={{ borderStyle: 'none' }} type="text" value={obj.dkName} name='dkName'/>
        </div>
        <div className='content'>
          <p style={{ paddingBottom: '0' }}>
            <textarea style={{ borderStyle: 'none' }} name="dkBody" id="" cols="45" rows="5" placeholder="在这里填写打卡内容!" defaultValue={obj.dkBody}></textarea>
          </p>
          <div className='img' style={{ position: 'relative', paddingTop: '0rem', display: '' }} >
            <img src={obj.dkPhoto} alt="" />
            {/* <div style={{ backgroundColor: 'red', width: ".4rem", height: '.4rem', textAlign: 'center', paddingTop: '.1rem', borderRadius: '.2rem', position: 'absolute', right: '-0.8rem', top: '-0.2rem' }} >
              <img src={`${xx}`} alt="" style={{ height: '.1rem' }} />
            </div> */}
          </div>
          <ul>
            <li><label for="avatar" style={{ display:'flex',flexDirection:'column',justifyContent:'space-between',alignItems:'center' }}>
              <img src={`${tu}`} alt="" /><p style={{ marginTop:'.1rem' }}>图片</p>
              <input
                onChange={handleChange}
                ref={ipt}
                id="avatar"
                type="file"
                name="photo"
                style={{ display: 'none' }}></input>
            </label></li>
            <li style={{ display:'flex',flexDirection:'column',justifyContent:'space-between',alignItems:'center' }}><img src={`${yuyin}`} alt="" /><p>语音</p></li>
            <li style={{ display:'flex',flexDirection:'column',justifyContent:'space-between',alignItems:'center' }}><img src={`${wen}`} alt="" /><p>文件</p></li>
            <li style={{ display:'flex',flexDirection:'column',justifyContent:'space-between',alignItems:'center' }}><img src={`${file}`} alt="" /><p>课件</p></li>
          </ul>
        </div>
        <ul className='tim'>
          <li><h2>打卡频次</h2><p>工作日</p></li>
          <li><h2>打卡周期</h2><p>20天</p></li>
        </ul>
      </div>
      <div style={{ display:'flex',justifyContent:'center',paddingBottom:'.9rem' }}>
      <button 
      // onClick={handleSubmit}
      style={{ 
          marginTop:'.2rem',
          backgroundColor:'#308bfe',
          height:'.4rem',
          width:'1.8rem',
          borderStyle:'none',
          borderRadius:'.2rem',
          color:'#fff'
         }} >确认编辑</button>
      </div>
      </form>
    </StyWrap>
  );
}

export default NewUi;